<template>
	
	<block v-if="loading">
		<emptyTips :loading="loading"></emptyTips>
	</block>
	<block v-else>
		
		<form class="page" @submit="submit">
			<!-- <div class="body"></div>
			<div class="warp">
				
			    <div class="left-body">
			        <div class="zfx"></div>
			        <div class="cfx"></div>
			        <div class="sjx"></div>
			        <div class="content">
			            <h1>
							<image class="logoText" src="../../static/logo.png" mode="widthFix"></image>
						</h1>
			            <div>我们的服务理念：为客户提供流畅的全端支付服务体验。</div>
						<div>我们的核心价值观：客户第一。</div>
						<div>品牌愿景：成为客户值得信赖的支付品牌。</div>
			        </div>
			    </div>
				
			    <div class="right-body">
			        <div class="content">
			            <h1><img class="logo" src="../../static/logo-icon.png" alt=""></h1>
			            <ul>
			                <li>
			                    <div class="item">
			                        <span><i class="fa fa-1x fa-user iconfont icon-yonghuming" aria-hidden="true"></i></span>
			                        <input type="text" name="username|用户名|2~20"  :disabled="disabled" :focus="disabled == false" placeholder="请输入用户名" >
			                    </div>
			                </li>
			                <li>
			                    <div class="item">
			                        <span><i class="fa fa-1x fa-unlock-alt iconfont icon-mima" aria-hidden="true"></i></span>
			                        <input type="password" name="password|密码|6~22" data-min="20" autocomplete="off" placeholder="请输入密码" >
			                    </div>
			                </li>
			                <li class="code">
			                    <div class="item">
			                        <span><i class="fa fa-1x fa-code iconfont icon-yanzhengma" aria-hidden="true"></i></span>
			                        <input type="text" name="code|验证码" autocomplete="off" placeholder="请输入验证码" >
			                    </div>
			                    <img :src="captcha" @click="switchCaptcha" class="codeImg">
			                </li>
			            </ul>
						<button class="btn" form-type="submit">登录</button>
			        </div>
			    </div>
			</div> -->
			
			
			<div class="bag">
			    <div class="left">
			        <div class="login">
			            <div class="title">登录</div>
			            <div class="inputGroup">
			                <div class="item">
								<input type="text" class="from-control" name="username|用户名|2~20"  :disabled="disabled" :focus="disabled == false" placeholder="请输入用户名" >
			                </div>
			                <div class="item">
								<input type="password" class="from-control" name="password|密码|6~22" data-min="20" autocomplete="off" placeholder="请输入密码" >
			                </div>
			
			            </div>
						<button class="btn btn-login" form-type="submit">登录</button>
			        </div>
			    </div>
			    <div class="right"></div>
			</div>
			
		</form>
		
	</block>
	
</template>

<script>
	export default {
		data() {
			return {
				disabled : true ,
				captcha : this.kit.myHost + "/admin/captcha" ,
				loading : true 
			}
		},
		
		onLoad(params) {
			if (!!params.sessionId) {
				uni.setStorageSync("token" , params.sessionId);
			}
			if (!!params.pages) {
				uni.setStorageSync("beforeLoginPage" , params.pages );
			}
			this.checkSession();
		},
		
		onShow() {
			var that = this ;
			setTimeout(function(e){
				that.disabled = false ;
			},1000);
		},
		
		methods: {
			
			checkSession:function(e){
				var that = this ;
				var beforePage = uni.getStorageInfoSync("beforeLoginPage") ;
				var token = uni.getStorageSync("token");
				if (!token) {
					that.loading = false ;
					return false ;
				}
				this.kit.get("/admin/checkSession",{token : token},function(res){
					that.redirectByMenu();	
				},function(e){
					that.loading = false ;
				});
			},
			
			switchCaptcha:function(e){
				this.captcha =  this.kit.myHost + "/admin/captcha?time=" + new Date().getTime()
			},
			
			submit : function(e){
				var finalData = this.form.check(e);
				if ( finalData == false) {
					return false ;
				}
				uni.showLoading({
					title:"登录中…"
				});
				var that = this ;
				this.kit.get("/admin/login",finalData,function(res){
					uni.hideLoading();
					uni.setStorageSync("token" , res.token );
					that.redirectByMenu();
				},function(res){
					uni.showToast({
						title: res.err ,
						icon : 'none'
					});	
					that.switchCaptcha();
				});
			},
			
			redirectByMenu:function(e){
				var that = this ;
				this.kit.get("/admin/globalData", {}, function(res) {
					that.admin = res.admin;
					that.menuList = res.menuList;
					getApp().globalData.menuList = res.menuList ;
					getApp().globalData.admin = res.admin ;
					//从本地存储自动登录
					var beforePage = uni.getStorageSync("beforeLoginPage");
					if (!!beforePage && beforePage != "/pages/login/login") {
						uni.removeStorageSync("beforeLoginPage");
						uni.redirectTo({
							url: beforePage 
						});
						that.loading = false ;
						return false ;
					}
					
					var url = that.getFirstSubMenu();
					uni.redirectTo({
						url: url || "/pages/index/index"
					});
				});	
			},
			
			getFirstSubMenu:function(e){
				for (var i = 0; i < this.menuList.length; i++) {
					var cur = this.menuList[i] ;
					if(cur.type == 1){
						var subUrl = this.getSubMenuByPid(cur.id);
						if(!!subUrl){
							return subUrl ;
						}
					}
				}
			},
			
			getSubMenuByPid:function(pid){
				for (var i = 0; i < this.menuList.length; i++) {
					var cur = this.menuList[i] ;
					if(cur.parentId == pid && cur.type == 2 && cur.pages.indexOf("pages") > -1){
						return cur.pages ;
					}
				}
			}
		}
	}
</script>

<style lang="less" scoped>
	button{
		line-height: inherit;
		display: inline-block;
	}
page,.page{
	width: 100%;
	height: 100%;
	background-color: #fff;
}
*{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  margin: 0;
  -webkit-tap-highlight-color: transparent;
}
html{
  width: 100%;
  height: 100%;
}
body{
  margin: 0 auto;
  font: 14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;
  position: relative;
}
a ,span{
  color: inherit;
  text-decoration: none;
  display: inline-block;
  &:hover{
    text-decoration: none;
  }
}
input,select{
  &:hover , &:focus , &:visited{
    outline: none;
  }
}
.container{
  position: absolute;
  top: 20%;
  left: 20%;
  
}
.fl{
  float: left;
}
.fr{
  float: right;
}
.clear:after{
  content: '';
  display: block;
  visibility: hidden;
  height: 0;
  clear: both;
}

body{
  width: 100%;
  height: 100%;
}

.login{
  .title{
    font-size: 32px;
    font-weight: bold;
    color: #3a3a3a;
    padding-left: 20px;
    &:before{
      content: '';
      display: block;
      border-top: 5px solid #647bf7;
      width: 56px;
      padding-bottom: 20px;
    }
  }
}

.inputGroup{
  padding-top: 50px;
  >.item{
    .from-control{
		height: auto;
      -webkit-border-radius: 30px;
      -moz-border-radius: 30px;
      border-radius: 30px;
      background-color: #f7f4fa;
      padding: 18px 30px;
      border:1px solid  #f7f4fa;
      width: 400px;
      font-size: 16px;
    }

    &+.item{
      margin-top: 40px;
    }
  }

}

.btn {
  text-align: center;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  padding: 6px 12px;
  border: 1px solid transparent;
  &.btn-login {
    background-color: #5d83f7;
    color: #fff;
    -webkit-border-radius: 30px;
    -moz-border-radius: 30px;
    border-radius: 30px;
    font-size: 16px;
    padding: 10px 80px;
    margin-top: 60px;
  }

}

.bag{
	padding-left: 100px;
  position: relative;
  height: 100%;
  .left{
    position: absolute;
    left: 20%;
    top: 25%;
    margin-left: -150px;
    width: 300px;
  }

  .right{
    width: 100%;
    height: 100%;
    background-image: url(../../static/1.jpg);
    -webkit-background-size: cover;
    background-size: cover;
    background-position: center;

  }

}
</style>
